<template>
  <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
      <div :class="cls">
        <div class="qiu">
            <p>{{value}}</p>
        </div>
        <div style="height: 12px;"> </div>
        <span>{{title}}</span>
      </div>

  </div>
</template>
<script>
export default {
  name: 'NumInfoShow',
  props: {
    title: {
      type: String,
      default: '待检数',
    },
    value: {
      type: String,
      default: '189',
    },
    cls: {
      type: String,
      default: 'data1',
    }
  },
  data() {
    return {}
  },
  methods: {
    getData() {
    }
  }
}
</script>
<style lang="less" scoped>
  .data1,.data2,.data3,.data4 {
      color:#fff;
      text-align: center;
      // position: absolute;
      width: 70%;
      height: 90%;
      // height: 8rem;
      background: url(../../../assets/golbal_info/di.png) no-repeat bottom center;
      background-size: contain;
      padding-top: 2%;
      box-sizing: border-box;
      .qiu {
          position: relative;
          width: 16vh;
          height: 16vh;
          margin: auto;
          display: table;
          p {
              .px2vh(font-size, 26);
              display:table-cell;
              vertical-align: middle;
          }
      }
      .qiu::before {
          content:'';
          display: block;
          width:16vh;
          height: 16vh;
          position: absolute;
          left: 50%;
          top: 50%;
          transform:translate(-50%,-50%);
          border-radius: 50%;
          border:3px solid rgba(255,255,255,.5);
          animation:scale 2s linear infinite;
      }
      span {
        .px2vh(font-size, 18);
      }
  }
  .data1 {
      .qiu {
          background: url(../../../assets/golbal_info/cicle04.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data2 {
      right: 5%;
      top: 8%;
      .qiu {
          background: url(../../../assets/golbal_info/cicle02.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data3 {
      left: 0;
      bottom:3%;
      .qiu {
          background: url(../../../assets/golbal_info/cicle03.png) no-repeat center;
          background-size: 100%;
      }
  }
  .data4 {
      right:6%;
      bottom: 3%;
      .qiu {
          background: url(../../../assets/golbal_info/cicle01.png) no-repeat center;
          background-size: 100%;
      }
  }

  @keyframes scale{
      0%{
          transform:translate(-50%,-50%) scale(0.9);
          opacity: 1;
      }
      100%{
          transform:translate(-50%,-50%) scale(1.5);
          opacity: 0;
      }
  }
  // 旋转动画
  @keyframes circle {
      0% {
          transform: rotateX(70deg) rotateZ(0);
      }

      100% {
          transform: rotateX(70deg) rotateZ(360deg);
      }
  }
  // 上下浮动动画
  @keyframes float {
      0% {
          transform: translateY(0%)
      }

      25% {
          transform: translateY(-25%)
      }

      50% {
          transform: translateY(0%)
      }

      75% {
          transform: translateY(-25%)
      }

      100% {
          transform: translateY(0%)
      }
  }

</style>
